<template>
	<div class="soon">
		<div class='main'>
			<div class="city">
<<<<<<< HEAD
				<p>杭州</p><i class="iconfont">&#xe600;</i>
=======
					<router-link to="/city">
						<p>{{cityName}}</p><i class="iconfont">&#xe600;</i>
					</router-link>
>>>>>>> dfbcefb (游侠客项目)
			</div>
			<form class='search'>
				<i class='iconfont'>&#xe637;</i>
				<input type="text" placeholder="国内秋色盘点大全"/>
			</form>
		</div>
		<div class="midden">
<<<<<<< HEAD
			<!-- <p>热搜</p> -->
			<!-- <div class="jkl"> -->
=======
>>>>>>> dfbcefb (游侠客项目)
				<ul>
					<li>
						热搜
					</li>
					<li v-for="item in menus" :key="item.id">
					{{item.name}}
					</li>
				</ul>
			<!-- </div> -->
		</div>
		<div class="swiper soon-swiper">
			 <ul class="swiper-wrapper">
				 	<li class="swiper-slide" v-for="item in list" :key='item.id'>
						<img :src="item.imgURL"/>
					</li>
			</ul>
			
			<div class="swiper-pagination"></div>
		</div>
	</div>
</template>

<script>
<<<<<<< HEAD
	
	import {onMounted} from 'vue';
	
=======
	import {onMounted} from 'vue';
	
	import {mapState} from 'vuex'
	
>>>>>>> dfbcefb (游侠客项目)
	import Swiper,{
			 Autoplay,
			 EffectCoverflow,
			 EffectCube,
			 Pagination,
	} from 'swiper';
	
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	
	export default{
		name:'Soon',
		data(){
			return{
				menus : [
					{ id:1 , name:'赏银杏' },
					{ id:2 , name:'赏枫叶' },
					{ id:3 ,name:'秋日骑行' },
					{ id:4 , name:'温泉滑雪' },
				],
				list:[
					{id:1,imgURL:require('../../../assets/img/1.jpg') },
					{id:2,imgURL:require('../../../assets/img/2.jpg')},
					{id:3,imgURL:require('../../../assets/img/3.jpg')},
					{id:4,imgURL:require('../../../assets/img/4.jpg')},
					{id:5,imgURL:require('../../../assets/img/5.jpg')},
					{id:6,imgURL:require('../../../assets/img/6.jpg')},
					{id:7,imgURL:require('../../../assets/img/7.jpg')},
					{id:8,imgURL:require('../../../assets/img/8.jpg')},
				],
			}
		},
<<<<<<< HEAD
=======
		computed:{
			...mapState(['cityName']),
		},
>>>>>>> dfbcefb (游侠客项目)
		setup(){
			onMounted(()=>{
				new Swiper('.soon-swiper',{
					loop:true,
					pagination:{
						el:'.swiper-pagination'
					},
					autoplay:{
						delay:3000,
						stopOnlastSlide:false,
						disableOnInteraction:false,
					}
				})
			})
		}
	}
</script>

<style scoped>
<<<<<<< HEAD
=======
	a{
		display: flex;
		text-decoration: none;
		color: black;
	}
>>>>>>> dfbcefb (游侠客项目)
	.soon{
		position: relative;
		width: 100%;
		background-color: #ffdd40;
		height: 7rem;
		z-index: 0;
	}
	.soon-swiper{
		width: 90%;
		height: 5.6rem;
	}
	.soon-swiper img{
		width: 100%;
		height: 100%;
		border-radius: 0.2rem;
	}
	.main{
		display: flex;
		justify-content: space-between;
		text-align: center;
		z-index: 5;
<<<<<<< HEAD
	}
	.city{
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.city p{
		padding-top: 0.4rem;
		padding-left: 0.3rem;
		font-size: 0.4rem;
		font-weight: bold;
=======
		width: 100%;
	}
	.city{
		width: 20%;
	}
	.city p{
		padding-top: 0.4rem;
		padding-left: 0.5rem;
		font-size: 0.4rem;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis
>>>>>>> dfbcefb (游侠客项目)
	}
	.city i{
		padding-top: 0.5rem;
		padding-left: 0.1rem;
	}
	.search{
		display: flex;
		justify-content: space-between;
		text-align: center;
<<<<<<< HEAD
=======
		width: 80%;
>>>>>>> dfbcefb (游侠客项目)
	}
	.main .search{
		background-color: white;
		border-radius: 0.3rem;
		overflow: hidden;
		line-height: 0.8rem;
<<<<<<< HEAD
		margin-right: 0.5rem;
=======
		margin-right: 0.4rem;
>>>>>>> dfbcefb (游侠客项目)
		margin-top: 0.2rem;
		width: 75%;
	}
	.main .search i{
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.main .search input{
		border: none;
<<<<<<< HEAD
		width: 90%;
		line-height: 0.3rem;
		text-indent: 1em;
		margin-right: 1.2rem;
=======
		width: 100%;
		line-height: 0.3rem;
		text-indent: 1em;
		margin-right: 1.2rem;
		outline: none;
>>>>>>> dfbcefb (游侠客项目)
	}
	.midden{
		width: 100%;
		height: 0.8rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.midden ul li{
		width: 19%;
		border-radius: 0.3rem;
		background-color: #ffeea0;
		line-height: 0.5rem;
		font-weight: bold;
		text-align: center;
		margin: 0 0.1rem;
	}
	.midden ul li:first-child{
		width: 13%;
		background-color: #ffdd40;
		border-radius: 0rem;
	}
	.midden ul{
		width: 100%;
		display: flex;
		vertical-align: middle;
		justify-content: center;
	}
	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color: #ffdd40;
	}
<<<<<<< HEAD
<<<<<<< HEAD
=======
	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color: #ffdd40;
	}
>>>>>>> 3e1e063 (11.26)
=======
	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color: #ffdd40;
	}
>>>>>>> dfbcefb (游侠客项目)
</style>
